<template>
  <q-card v-show="showRightMenu" :style="{left: `${contextMenuInfo.x}px`, top: `${contextMenuInfo.y}px`}"
          class="absolute text-13 q-pt-xs q-pb-xs map-right-menu">
    <q-list dense>
      <q-item v-ripple :disable="canClick('copy')" clickable @click="handleCopy">
        <q-item-section>{{ $t('Copy') }}</q-item-section>
      </q-item>
      <q-item v-ripple :disable="canClick('paste')" clickable @click="handlePaste">
        <q-item-section>{{ $t('Stick') }}</q-item-section>
      </q-item>
      <q-item v-ripple :disable="canClick('delete')" clickable @click="handleDelete">
        <q-item-section>{{ $t('Del') }}</q-item-section>
      </q-item>
      <q-item v-ripple :disable="canClick('point')" clickable @click="handleAttrs('point')">
        <q-item-section>{{ $t('MapCore.PointAttrs') }}</q-item-section>
      </q-item>
      <q-item v-ripple :disable="canClick('line')" clickable @click="handleAttrs('line')">
        <q-item-section>{{ $t('MapCore.LineAttrs') }}</q-item-section>
      </q-item>
      <q-item v-ripple :disable="canClick('area')" clickable @click="handleAttrs('area')">
        <q-item-section>{{ $t('MapCore.AreaAttrs') }}</q-item-section>
      </q-item>
      <q-item v-ripple :disable="canClick('text')" clickable @click="handleAttrs('text')">
        <q-item-section>{{ $t('MapCore.TextAttrs') }}</q-item-section>
      </q-item>
    </q-list>
  </q-card>
</template>

<script setup>
import {
  contextMenuInfo, currentAction, exportAttrs, openedAttrsDrawer, setCanRedo, setCanUndo, setShowRightMenu,
  showRightMenu
} from 'src/views/MapCore/MapGlobal/utils/KonvaEvent'
import { batchPastePoint, fillUndoList, handleDeleteSelected } from 'src/views/MapCore/MapGlobal/utils/MouseEvent'
import { computed } from 'vue'

const props = defineProps({ openedMap: { type: Object, default: () => ({}) } })

const pasteList = []
const canClick = computed(() => {
  return type => {
    const { type: menuAction } = contextMenuInfo.value || {}
    const { batchSelected = [] } = exportAttrs()
    if (type === 'paste') return !pasteList.length
    if (currentAction.value === 'move') {
      if (['delete'].includes(type)) return false
      if (menuAction === 'area') return !['delete', 'area'].includes(type)
      if (menuAction === 'text') return !['delete', 'text'].includes(type)
      if (menuAction === 'line') return !['delete', 'line'].includes(type)
      return !['delete', 'point'].includes(type)
    }
    if (batchSelected.length === 0) return true
    if (currentAction.value === 'pointSelection') return !['copy', 'delete', 'point'].includes(type)
    if (currentAction.value === 'lineSelection') return !['delete'].includes(type)
  }
})

const compareFn = (a, b) => a.x() - b.x() || b.y() - a.y()
const handleCopy = () => {
  pasteList.splice(0)
  const { batchSelected = [], operShape } = exportAttrs()
  if (currentAction.value === 'move') pasteList.push(operShape)
  if (currentAction.value === 'pointSelection') pasteList.push(...[...batchSelected].sort(compareFn))
  setShowRightMenu(false)
}
const handlePaste = () => {
  if (!pasteList.length) return setShowRightMenu(false)
  const { batchSelected = [], CANVAS, redoList = [], undoList = [] } = exportAttrs()
  const shapes = batchPastePoint(CANVAS, pasteList)
  fillUndoList(undoList, redoList, shapes, 'createPoint')
  setCanUndo(undoList.length > 0)
  setCanRedo(redoList.length > 0)
  batchSelected.splice(0)
  setShowRightMenu(false)
}
const handleDelete = () => {
  const { type: menuAction } = contextMenuInfo.value || {}
  const { batchSelected = [], CANVAS, operShape, redoList = [], undoList = [] } = exportAttrs()
  let selected
  if (menuAction === 'area') {
    if (!operShape) return
    const uid = operShape.getAttr('uid')
    const areaTitle = CANVAS.findOne('.texts').find('Text').find(el => el.getAttr('uid') === uid)
    selected = areaTitle ? [operShape, areaTitle] : [operShape]
  } else selected = operShape ? [...batchSelected, operShape] : batchSelected
  const shapes = handleDeleteSelected(CANVAS, selected)
  fillUndoList(undoList, redoList, shapes, 'deleteShape')
  batchSelected.splice(0)
  setShowRightMenu(false)
  setCanUndo(undoList.length > 0)
  setCanRedo(redoList.length > 0)
}
const handleAttrs = action => {
  const { mapCode } = props.openedMap || {}
  openedAttrsDrawer(action, mapCode)
}
</script>